<template>
	<el-dialog title="计数组件" :visible="pickCountnumber.status" width="540px" :before-close="handleCancel" class="count">
		<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
			
			<el-tab-pane :name="item.title" v-for="(item,key) in tab_btn" :key="key">
				<span slot="label" :style="{backgroundColor:item.color}">
					<i class="iconfont count-icon" :class="item.icon"></i>
					{{item.content}}
				</span>
			</el-tab-pane>
			
		</el-tabs>
		<el-form ref="countNumber" label-width="100px" :label-position="labelPosition">
				<el-form-item label="计数图标" v-if="iscustom">
				<img :src="countNumber.url" class="btn-img">
				<el-button  type="primary" @click="showCustomDialog" class="change-btn">更换图片</el-button>
			</el-form-item>
			<el-form-item label="颜色">
				<el-color-picker v-model="countNumber.color"></el-color-picker>
				<el-input v-model="countNumber.color" clearable></el-input>
			</el-form-item>
			<el-form-item label="字号">
				<el-radio-group v-model="countNumber.size">
					<el-radio-button v-for="item in size" :key="item.key" :label="item.key">{{item.value}}</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="布局">
				<el-radio-group v-model="countNumber.layout">
					<el-radio-button v-for="item in layout" :key="item.key" :label="item.key">{{item.value}}</el-radio-button>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="handleCancel">取 消</el-button>
			<el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		name: 'PickCountnumber',
		data() {
			return {
				labelPosition: 'right',
				activeName: '',
				tab_btn:[
					{
						title:'like',
						icon:'icon-like',
						color:'#8898b7',
						content:'喜欢'
					},
					{
						title:'fabulous',
						icon:'icon-jacking',
						color:'#8898b7',
						content:'顶起'
					},
					{
						title:'flowers',
						icon:'icon-flowers',
						color:'#8898b7',
						content:'送花'
					},
					{
						title:'vote',
						icon:'icon-vote',
						color:'#8898b7',
						content:'投票'
					},
					{
						title:'custom',
						icon:'',
						color:'#5c7aff',
						content:'自定义'
					}
				],
				iscustom: false,
				message: '',
				countNumber: {
					url: '',
					color: '#ff6b63',
					size: '26px',
					layout: 'left',
					iscustom:false
				},
				size: [{
					key:'36px',
					value:'大'
				}, {
					key:'26px',
					value:'中'
				}, {
					key:'16px',
					value:'小'
				}],
				layout: [{
					key:'left',
					value:'左右'
				},{
					key:'top',
					value:'上下'
					}]
			}
		},
		computed: {
			pickCountnumber() {
				const countNumber = this.$store.getters.pickCountnumber
				this.activeName = countNumber.btn
				return countNumber
			}
		},
		methods: {
			// tab切换
			handleClick() {
				this.iscustom = false
				if (this.activeName === 'custom') {
					this.iscustom = true
					this.showCustomDialog()
				}
			},
			// 取消
			handleCancel() {
				this.$store.commit('SET_COUNT_NUMBER', false)
			},
			// 确定
			handleConfirm() {
				for(let item of this.tab_btn){
					if(item.title==this.activeName&&item.title!='custom'){
						this.countNumber.url =item.icon
						break
					}
				}
				this.countNumber.iscustom=this.iscustom
				this.pickCountnumber && this.pickCountnumber.callback && this.pickCountnumber.callback(this.countNumber)
				this.handleCancel()
			},
			showCustomDialog() {
				this.$store.commit('IMAGE_LIBRAY', {
					status: true,
					type:'btn',
					cropperImg: false,
					callback: (result) => {
						// console.log(result.url)
						this.countNumber.url=result.url
						this.iscustom = true
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
